<template>
  <d2-container>
    <div style="margin:10px;display:flex;width:100%;">
      <el-dialog
        title="添加"
        :visible.sync="dislaog">
        <el-form :model="rules" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <div style="display:flex;">
            <el-form-item label="商户选择：" prop="pass">
              <el-select v-model="rules.account" filterable @change="flags" placeholder="请选择">
                <el-option
                  v-for="item in tableData"
                  :key="item.id"
                  :label="item.user"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店铺选择：" prop="checkPass">
              <el-select v-model="rules.shopname" filterable @change="flags" placeholder="请选择">
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.shopname"
                  :value="item.shopname">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="display:flex;">
            <el-form-item label="插旗颜色：" prop="age">
              <el-select v-model="rules.seller_flasg" filterable placeholder="请选择">
                <el-option
                  v-for="item in option_color"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="指定备注：" prop="age">
              <el-input v-model="rules.memo" class="accounts"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex;">
            <el-form-item label="多款价格：" prop="age">
              <el-input v-model="rules.variety" class="accounts"></el-input>
            </el-form-item>
            <el-form-item label="假聊价格：" prop="age">
              <el-input v-model="rules.actor" class="accounts"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex;"><el-form-item label="浏览价格：" prop="age">
            <el-input v-model="rules.browse" class="accounts"></el-input>
          </el-form-item>
            <el-form-item label="货币价格：" prop="age">
              <el-input v-model="rules.compare" class="accounts"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex;"> <el-form-item label="收藏价格：" prop="age">
            <el-input v-model="rules.favorites" class="accounts"></el-input>
          </el-form-item>
            <el-form-item label="年龄价格：" prop="age">
              <el-input v-model="rules.compare" class="accounts"></el-input>
            </el-form-item>
          </div>
           <div style="display:flex;">
             <el-form-item label="货币价格：" prop="age">
               <el-input v-model="rules.gyd_money" class="accounts"></el-input>
             </el-form-item>
             <el-form-item label="隔夜价格：" prop="age">
               <el-input v-model="rules.generation" class="accounts"></el-input>
             </el-form-item>
           </div>
            <el-form-item label="加购价格：" prop="age">
              <el-input v-model="rules.shop_cart" class="accounts"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dislaog = false">取 消</el-button>
          <el-button type="primary" @click="shop_tasks()">确 定</el-button>
        </span>
      </el-dialog>
      <el-button type="primary" @click="dislaog = true">添加</el-button>
    </div>
    <el-table
      :data="tableDataing"
      border
      style="width: 100%">
      <el-table-column
        prop="cooperation_id"
        align="center"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="cooperation_shopname"
        align="center"
        label="店铺名字">
      </el-table-column>
      <el-table-column
        prop="seller_flasg"
        align="center"
        label="插旗颜色">
        <template slot-scope="scope">
           <i class="el-icon-s-flag red" v-if="scope.row.seller_flasg == 1"></i>
          <i class="el-icon-s-flag yellow" v-if="scope.row.seller_flasg == 2"></i>
          <i class="el-icon-s-flag green" v-if="scope.row.seller_flasg == 3"></i>
          <i class="el-icon-s-flag blue" v-if="scope.row.seller_flasg == 4"></i>
          <i class="el-icon-s-flag purple" v-if="scope.row.seller_flasg == 5"></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="memo"
        align="center"
        label="指定备注">
      </el-table-column>
      <el-table-column
        prop="variety"
        align="center"
        label="一单多款价格">
      </el-table-column>
      <el-table-column
        prop="actor"
        align="center"
        label="假聊价格">
      </el-table-column>
      <el-table-column
        prop="browse"
        align="center"
        label="浏览价格">
      </el-table-column>
      <el-table-column
        prop="compare"
        align="center"
        label="货币价格">
      </el-table-column>
      <el-table-column
        prop="favorites"
        align="center"
        label="收藏价格">
      </el-table-column>

      <el-table-column
        prop="gyd_money"
        align="center"
        label="年龄划分">
      </el-table-column>
      <el-table-column
        prop="generation"
        align="center"
        label="隔夜单价格">
      </el-table-column>
      <el-table-column
        prop="shop_cart"
        align="center"
        label="加入购物车价格">
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      background
      :page-size="20"
      layout="total, prev, pager, next"
      :total="count"
      style="text-align:right;margin:10px 0;">
    </el-pagination>
  </d2-container>
</template>

<script>
import { task_list,shop_task } from "@/api/sys.login";
export default {
  name: "index",
  data(){
    return{
        token:this.$cookies.get('d2admin-1.8.0-token'),
        options:[],
        value:"",
      tableDataing:[],
        dislaog:false,
        rules:{
          shopname:"",
          account:"",
          seller_flasg:"",//插旗颜色
          memo:"",
          variety:"",
          actor:"",
          browse:"",
          compare:"",
          favorites:"",
          gyd_money:"",
          generation:"",
          shop_cart:"",
        },
      count:"",
       option_color:[
         {value:1,label:"红"},
         {value:2,label:"黄"},
         {value:3,label:"绿"},
         {value:4,label:"蓝"},
         {value:5,label:"紫"},
       ],
        page:1,
        valuing:"",
        page_size:10,
        tableData:[],
    }
  },
  methods:{
    handleCurrentChange(val) {
      this.page = val
      this.flags()
    },
    shop_tasks(){
      let params = {
        cooperation_id:this.rules.account,
        cooperation_shopname:this.rules.shopname,
        seller_flasg:this.rules.seller_flasg,
        memo:this.rules.memo,
        variety:this.rules.variety,
        actor:this.rules.actor,
        browse:this.rules.browse,
        compare:this.rules.compare,
        favorites:this.rules.favorites,
        gyd_money:this.rules.gyd_money,
        generation:this.rules.generation,
        shop_cart:this.rules.shop_cart,
      }
      shop_task(params).then((res)=>{
          this.dislaog = false
        this.flags()
      })
    },
    agenlists() {
      this.$axios.get('/api/cooperations/Prices?page='+this.page+'&pageSize='+this.page_size,{
        headers:{
          'X-token':this.token
        }
      }).then((res) => {
        if(res.status == 200){
          this.tableData = res.data.data
          this.total = res.data.count
        }else{
          this.$message({
            type:'error',
            message:res.data.message
          })
        }
      });
    },
    task_lists(){
      let params = {
          shop:""
      }
      task_list(params).then((res)=>{
        this.options = res.data
        this.flags()
        this.agenlists()
      })
    },
      flags(){
        this.$axios.get('/api/cooperations/shop_task?id='+this.value+'&page='+this.page+'&pageSize='+this.page_size,{
           headers:{
              'X-token':this.token
           }
        }).then((res)=>{
          this.tableDataing = res.data.data
          this.count = res.data.count
          console.log(res.data.data);
        })
      }
  },
  created(){
    this.task_lists()
  }
}
</script>

<style scoped>
.accounts{
   width:220px;
}
.red{
   color:red;
  font-size:18px;
}
.yellow{
  color:yellow;
  font-size:18px;
}
.green{
  color:green;
  font-size:18px;
}
.blue{
  color:blue;
  font-size:18px;
}
.purple{
  color:purple;
  font-size:18px;
}
</style>
